<template>
    <div class="goods">
        <div class="menu-wrapper" ref="menuWrapper">
            <ul>
                <li v-for="(item,index) in goods" :key="index" class="menu-item"
                    :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
                    <span class="text border-1px">{{item.name}}</span>
                </li>
            </ul>
        </div>
        <div class="foods-wrapper" ref="foodsWrapper">
            <ul>
                <li v-for="(item,good_index) in goods" :key="good_index"
                    class="food-list food-list-hook">
                    <h1 class="title">{{item.name}}</h1>
                    <ul>
                        <li v-for="(food,food_index) in item.foods" :key="food_index"
                            class="food-item border-1px">
                            <div class="icon" @click="selectFood(food,$event)">
                                <img width="57" height="57" :src="food.image">
                            </div>
                            <div class="content">
                                <h2 class="name">{{food.name}}</h2>
                                <p class="desc">{{food.description}}</p>
                                <div class="extra">
                                    <span class="count">月售{{food.sellCount}}份</span>
                                    <span>好评率{{food.rating}}%</span>
                                </div>
                                <price :food="food"></price>
                                <div class="cartcontrol-wrapper">
                                    <cartcontrol @cart-add="cartAdd" :food="food"></cartcontrol>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <shopcart
                ref="shopcart"
                :select-foods="selectedFoods"
                :delivery-price="seller.deliveryPrice"
                :min-price="seller.minPrice"
                @pay="pay"
        ></shopcart>
        <food :food="selectedFood" @cart-add="cartAdd" ref="food"></food>
    </div>
</template>

<script type="text/ecmascript-6">
    import BScroll from 'better-scroll';
    import shopcart from "../ShopCart/ShopCart";
    import cartcontrol from "../cartcontrol/cartcontrol";
    import food from "../food/food";
    import price from "../price/price";


    export default {
        props: {
            seller: {
                type: Object
            }
        },
        data() {
            return {
                goods: [],
                listHeight: [],
                scrollY: 0,
                selectedFood: {}
            }
        },
        computed: {
            currentIndex() {
                for (let i = 0; i < this.listHeight.length; i++) {
                    let height1 = this.listHeight[i];
                    let height2 = this.listHeight[i + 1];
                    if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
                        return i
                    }
                }
                return 0
            },
            selectedFoods() {
                let foods = [];
                this.goods.forEach((good) => {
                    good.foods.forEach((food) => {
                        if (food.count) {
                            foods.push(food);
                        }
                    })
                });
                return foods;
            }
        },
        created() {
            this.$http.get('/api/goods').then((response) => {
                response = response.body;
                this.goods = response;
                this.$nextTick(() => {
                    this._initScroll();
                    this._calculateHeight()
                })
            });
            this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
        },
        methods: {
            _initScroll() {
                this.menuScroll = new BScroll(this.$refs.menuWrapper, {
                    click: true
                });
                this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
                    click: true,
                    probeType: 3
                });
                this.foodsScroll.on('scroll', (pos) => {
                    this.scrollY = Math.abs(Math.round(pos.y))
                })
            },
            _calculateHeight() {
                let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
                let height = 0;
                this.listHeight.push(height);
                for (let i = 0; i < foodList.length; i++) {
                    height += foodList[i].clientHeight;
                    this.listHeight.push(height)
                }
            },
            selectMenu(index, event) {
                if (!event._constructed) {
                    return;
                }
                let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
                let el = foodList[index]
                this.foodsScroll.scrollToElement(el, 300)
            },
            cartAdd(target) {
                //体验优化，异步执行下落动画
                this.$nextTick(() => {
                    this.$refs.shopcart.drop(target)
                });
            },
            selectFood(food, event) {
                if (!event._constructed) {
                    return;
                }
                this.selectedFood = food;
                this.$refs.food.show();
            },
            pay() {
                this.$message({
                    message: '创建订单。。。',
                    type: 'success',
                    customClass: 'alert-shadow'
                });
                // eslint-disable-next-line no-console
                // console.log(this.selectedFoods);
                this.$http.post('/api/order/create', {
                    name: decodeURI(decodeURI(this.seller.info.nickname)),
                    address: "桌号" + this.seller.info.address,
                    openid: this.seller.info.openid,
                    items: JSON.stringify(this.selectedFoods)
                }).then((response) => {
                    // eslint-disable-next-line no-console
                    console.log(response)
                    let body = response.body;
                    let data = body.data;
                    if (body.code === 0) {
                        this.$message({
                            message: "订单创建成功，订单号为" + data.orderId + "正在调用支付",
                            type: 'success',
                            customClass: 'alert-shadow'
                        });
                        // eslint-disable-next-line no-console
                        console.log(data.address)
                        this.$http.get('/pay', {
                            params: {
                                out_trade_no: data.orderId,
                                subject: "桌号" + this.seller.info.address,
                                total_amount: data.orderAmount,
                                body: JSON.stringify(data.orderDetailList),
                                address: this.seller.info.address,
                            }
                        }).then((response) => {
                            // eslint-disable-next-line no-console
                            console.log(response)
                            let data = response.bodyText;
                            document.write(data);
                        })
                    } else {
                        this.$message({
                            message: body.msg,
                            type: 'error',
                            customClass: 'alert-shadow'
                        });
                    }
                })
            }
        },
        components: {
            shopcart,
            cartcontrol,
            food,
            price
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../../common/stylus/mixin.styl"

    .goods
        display flex
        position absolute
        top 174px
        bottom 46px
        width 100%
        overflow hidden

        .menu-wrapper
            flex 0 0 80px
            width 80px
            background #f3f5f7

            .menu-item
                display table
                height 54px
                width 56px
                padding 0 12px
                line-height 14px

                &.current
                    position relative
                    z-index 10
                    margin-top -1px
                    background #fff
                    font-weight 700
                    overflow hidden

                .icon
                    display inline-block
                    vertical-align top
                    width 12px
                    height 12px
                    margin-right 2px
                    background-size 12px 12px
                    background-repeat no-repeat

                    &.decrease
                        bg-image('decrease_3')

                    &.discount
                        bg-image('discount_3')

                    &.guarantee
                        bg-image('guarantee_3')

                    &.invoice
                        bg-image('invoice_3')

                    &.special
                        bg-image('special_3')

                .text
                    display table-cell
                    width 56px
                    vertical-align middle
                    border-1px(rgba(7, 17, 27, 0.1))
                    font-size 12px


        .foods-wrapper
            flex 1

            .title
                padding-left 14px
                height 26px
                line-height 26px
                border-left 2px solid #d9dde1
                font-size 12px
                color rgb(147, 153, 159)
                background #f3f5f7

            .food-item
                display flex
                margin 18px
                padding-bottom 18px
                border-1px(rgba(7, 17, 27, 0.1))

                &:last-child
                    border-none()
                    margin-bottom 0

                .icon
                    flex 0 0 57px
                    margin-right 10px

                .content
                    flex 1

                    .name
                        margin 2px 0 8px 0
                        height 14px
                        line-height 14px
                        font-size 14px
                        color rgb(7, 17, 27)

                    .desc, .extra
                        line-height 10px
                        font-size 10px
                        color rgb(147, 153, 159)

                    .desc
                        line-height 12px
                        margin-bottom 8px

                    .extra
                        .count
                            margin-right 12px

                    .cartcontrol-wrapper
                        position absolute
                        right 0
                        bottom 12px
</style>
